<template>
  <div>
    <!-- 头部区域 -->
                     <!-- 查询区域 -->
    <div class="hearder">
      <el-card class="card">
     <el-row style="height: 40px; width: 100%;">
         <el-col :span="24">
          <div>
<el-form :inline="true" :model="from">
  <el-form-item label="点位搜索" >
    <el-input v-model="nodes.name" placeholder="请输入"></el-input>
  </el-form-item>
  <el-form-item label="区域搜索">
    <el-select v-model="nodes.regionId"  placeholder="请选择">
       <el-option
        v-for="item in quyu"
         :key="item.id"
       :label="item.name"
       :value="item.id">
       </el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
   <el-button type="primary" icon="el-icon-search" @click="sousu">搜索</el-button>
  </el-form-item>
</el-form>
          </div>
          </el-col>
      </el-row>
      </el-card>
    </div>
    <!-- 表格区域 -->
    <div  class="opan">
      <el-card class="cards">
         <el-row>
        <el-col :span="24"><div>
            <el-button icon="el-icon-circle-plus" type="danger" @click="xinjian">新建</el-button>
               </div>
          </el-col>
                          <!-- 新增点位弹出窗 -->
          <el-dialog title="提示" :visible="dialogVisible" width="35%" @close="dialog">
            <el-form label-width="100px" :model="models" :rules="modes" ref="monuber">
               <el-form-item label="点位名称" prop="name">
                 <el-input v-model="models.name" maxlength="15"  show-word-limit placeholder="请输入"></el-input>
               </el-form-item>
        <el-form-item label="所在区域" prop="regionId">
        <el-select v-model="models.regionId" placeholder="请选择活动区域">
          <el-option
        v-for="item in quyu"
         :key="item.id"
       :label="item.name"
       :value="item.id">
       </el-option>
    </el-select>
              </el-form-item>
              <el-form-item label="所属商圈" prop="businessId">
        <el-select v-model="models.businessId" placeholder="请选择">
        <el-option
            v-for="obj in shquan"
            :key="obj.id"
            :label="obj.name"
            :value="obj.id">
                </el-option>
        </el-select>
              </el-form-item>
              <el-form-item label="归属合作商" prop="ownerName">
        <el-select v-model="models.ownerName" placeholder="请选择">
          <el-option
          v-for="kes in guishu"
          :key="kes.id"
          :label="kes.name"
          :value="kes.id">
          </el-option>
        </el-select>
              </el-form-item>
              <el-form-item label="详细地址" prop="areaCode">
                    <el-cascader
        size="large"
        :options="options"
        v-model="models.areaCode"
        @change="handleChange"
      >
      </el-cascader>
              </el-form-item>
               <el-form-item prop="addr">
                <el-input v-model="models.addr" type="textarea" maxlength="60"  show-word-limit></el-input>
                         </el-form-item>
            </el-form>
  <span slot="footer">
    <el-button type="primary" @click="dialog">取消</el-button>
    <el-button type="primary" @click="sumbit">确 定</el-button>
  </span>
</el-dialog>
             <!-- 表格信息区域 -->
  <el-col>
    <el-table style="width: 100%" :data="noDe">
      <el-table-column prop="index" label="序号" width="80">
        <template slot-scope="scope">
                    <span>{{ scope.$index + (nodes.pageIndex - 1) * nodes.pageSize + 1 }}</span>
                </template>
      </el-table-column>
      <el-table-column prop="name" label="点位名称" width="160"></el-table-column>
      <el-table-column  prop="region.name" label="所在区域" width="200"></el-table-column>
      <el-table-column  prop="businessType.name" label="商圈类型" width="200"></el-table-column>
      <el-table-column  prop="ownerName" label="合作商" width="180" />
      <el-table-column  prop="name" label="详细地址" width="180" />
      <el-table-column  label="操作" width="180">
        <template #default="{ row }">
          <div class="flx">
        <el-button type="text" size="small" @click="chakan(row.id)">查看详情</el-button>
        <el-button type="text" size="small" @click="bianji(row.id)">编辑</el-button>
        <el-button  type="danger" size="small" @click="shanchu(row.id)">删除</el-button>
          </div>
      </template>
      </el-table-column>
    </el-table>
  </el-col>
         </el-row>
         <el-dialog  title="点位详情" :visible="visbba"  width="42%" @close='visbbs'>
   <el-table style="width: 100%" :data="nodeva">
      <el-table-column  type="index"  prop=""    label="序号"   width="150"></el-table-column>
      <el-table-column   prop="innerCode"   label="机器编号"  width="150"> </el-table-column>
      <el-table-column   prop="vmStatus"   label="设备状态" width="150">
        <template #default="{ row }">
        {{ rou[row.vmStatus] }}
      </template>
      </el-table-column>
      <el-table-column   prop="lastSupplyTime"   label="最后一次供货世间" width="180">
         <template #default="{ row }">
              {{ formatDate(row.lastSupplyTime) }}
          </template>
      </el-table-column>
    </el-table>
</el-dialog>
         <!-- 分页 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
           <el-button @click="shang">上一页</el-button>
           <el-button  @click="xia">下一页</el-button>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import { Nodes, Nodedel, Regin, Business, ParTner, NodeXin, Nodexiu, NodeVmlist } from '@/api'
import { regionData, CodeToText } from 'element-china-area-data'
import dayjs from 'dayjs'
export default {
  data () {
    return {
      rou: {
        0: '未投放',
        1: '运营',
        3: '撤机'
      },
      visbba: false,
      vals: '',
      options: regionData,
      selectedOptions: [],
      noDe: [], // 表格数据
      quyu: [], // 所在区域列表数据
      shquan: [], // 所属商圈列表类型
      guishu: [], // 归属合作商列表数据
      nodeva: [], // 查看详情数据
      dialogVisible: false,
      nodes: {
        pageIndex: 1,
        pageSize: 10,
        regionId: '',
        name: ''
      },
      models: {
        name: '', // 点位名称
        areaCode: '', // 最后一级区域Id
        businessId: '', // 所属商圈
        regionId: '', // 所属区域id
        ownerId: '',
        createUserId: 1,
        ownerName: '', // 归属合作商
        addr: '', // 详细地址
        vals: ''// 备注
      },
      from: {
        name: '',
        region: ''
      },
      modes: {
        name: [
          { required: true, message: '请输入', trigger: 'blur' }

        ],
        regionId: [
          { required: true, message: '请输入', trigger: 'blur' }

        ],
        businessId: [
          { required: true, message: '请输入', trigger: 'blur' }

        ],
        ownerName: [
          { required: true, message: '请输入', trigger: 'blur' }

        ],
        addr: [
          { required: true, message: '请输入', trigger: 'blur' }
        ]
        // vals: [
        //   { required: true, message: '请输入', trigger: 'blur' }
        // ]
      }
    }
  },
  async created () {
    // 区域搜索
    const res = await Regin(this.nodes)
    this.quyu = res.data.currentPageRecords
    // 商圈数据
    const re = await Business()
    this.shquan = re.data
    // 归属合作商
    const se = await ParTner(this.nodes)
    this.guishu = se.data.currentPageRecords
    console.log(this.guishu)
    // console.log(se)
    this.node()
    this.rff()
  },
  methods: {
    // 格式化时间
    formatDate (value) {
      return dayjs(value).format('YYYY-MM-DD')
    },
    // 查看详情
    async  chakan (id) {
      this.visbba = true
      const va = await NodeVmlist(id)
      // console.log(va)
      this.nodeva = va.data
    },
    visbbs () {
      this.visbba = false
    },
    // 详细地址
    handleChange () {
      var loc = ''
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]]
      }
      alert(loc)
    },
    async rff () {
    },
    async node () {
    // 表格数据
      const res = await Nodes(this.nodes)
      this.noDe = res.data.currentPageRecords
    },
    // 搜索
    sousu () {
      this.node()
    },
    // 确定新建
    sumbit () {
      this.$refs.monuber.validate(async (valid) => {
        if (!valid) return
        await NodeXin({
          ...this.models,
          addr: this.models.addr[this.models.addr.length - 1]
        })
        this.$message.success('新增角色成功')
        this.dialog()
        this.node()
      })
    },
    // 上一页
    shang () {
      if (this.nodes.pageIndex === 1) {
        return false
      } else {
        this.nodes.pageIndex--
        this.node()
      }
    },
    // 下一页
    xia () {
      if (this.nodes.pageIndex === this.pageIndex) {
        return false
      } else {
        this.nodes.pageIndex++
        this.node()
      }
    },
    // 新建
    xinjian () {
      this.dialogVisible = true
    },
    // 弹窗关闭
    dialog () {
      this.dialogVisible = false
      this.$refs.monuber.resetFields()// 重置表单数据和校验结果
      this.models.addr = '' // 手动清空部门的值
    },
    // 编辑
    async bianji (id) {
      this.dialogVisible = true
      const res = await Nodexiu(id)
      this.models = res.data
    },
    // 删除
    shanchu (id) {
      this.$confirm('此操作将永久删除该点位, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
      // 2. 调用删除接口
        await Nodedel(id)
        // 3. 提示用户
        this.$message.success('删除角色成功')
        // 最后一页最后一条数据时，页数减 1
        if (this.noDe.length === 1 && this.nodes.pageIndex > 1) {
          this.nodes.pageIndex--
        }
        // 4. 刷新列表
        this.node()
      })
    }
  }
}
</script>

<style scoped lang="less">
.hearder{
  padding: 10px;
.card{
 padding: 5px
}
}
.opan{
  padding: 10px;
  .cards{
 padding: 5px
  }
}
.flx{
  display: flex;
}
</style>
